import { ANIMATE_CSS_PREFIX } from '@/utils/index';

/**
 * @param {*} element 传入的H5元素对象，也就是需要应用动画效果的HTML元素，通过它来指定动画作用的目标
 * @param {*} animation 动画名称，该名称对应Animate.css中预先定义好的各种动画，决定了元素呈现的动画样式
 * @param {*} prefix 可以不用传，默认参数即可，它主要用于指定动画类名的前缀，一般情况下保持默认就能满足常规需求
 * @returns 返回一个Promise对象，当动画执行结束时，该Promise会被resolve，方便开发者进行后续的逻辑处理
 */
export const useAnimateCss = (
  element: HTMLElement,
  animation: string,
  prefix = ANIMATE_CSS_PREFIX,
) =>
  new Promise((resolve) => {
    const animationName = `${prefix}${animation}`;
    element.classList.add(`${prefix}animated`, animationName);

    // 当动画执行完毕，移除之前添加的动画类名，这一步很关键，能有效避免样式残留，保证页面样式的整洁
    function handleAnimationEnd(event: Event) {
      event.stopPropagation();
      element.classList.remove(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }

    // 为元素绑定animationend事件监听器，一旦动画结束，就会触发预先定义好的handleAnimationEnd处理函数
    element.addEventListener('animationend', handleAnimationEnd, { once: true });
  });
